/*
 * @Description: 单个评价星星组件
 * @Author: buwei.huang
 * @Date: 2019-07-16 15:54:24
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-16 14:05:05
 */
<template>
  <div class="AppraiseItem_wrap flex-vc">
    <div class="AppraiseItem_star ">
      <i
        class="icon iconfont icon-shoucang1 fontsize48 "
        :class="item.isIllume ? 'isIllume' : ''"
        v-for="(item,index) in stars"
        :key="index"
        @click="illumeStar(index)"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    inStarNum: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      stars: [
        {
          isIllume: false
        },
        {
          isIllume: false
        },
        {
          isIllume: false
        },
        {
          isIllume: false
        },
        {
          isIllume: false
        }
      ]
    }
  },
  mounted() {
    if (this.inStarNum) {
      this.illumeStar(this.inStarNum - 1)
    }
  },
  methods: {
    // 点亮星星
    illumeStar(index) {
      let inStars = index + 1
      this.stars.map((item, i) => {
        if (i <= index) {
          item.isIllume = true
        } else {
          item.isIllume = false
        }
      })
      this.$emit('inStars', inStars)
    }
  }
}
</script>
<style>
.AppraiseItem_wrap {
  height: 104px;
}
.AppraiseItem_star {
  height: 104px;
}
.AppraiseItem_star .icon {
  color: #cccccc;
  padding-right: 26px;
  display: inline-block;
  height: 104px;
  line-height: 104px;
}
.AppraiseItem_star .isIllume {
  color: #fecb0a;
}
</style>
